<div class="payment_top" xmlns="http://www.w3.org/1999/html">
    <a href="javascript:history.go(-1)"><img class="backImg" src="images/leftarrow.png"></a>
    <span class="payment_title">我要维修</span>
    <!--<img class="backImg_right" src="images/add.png">-->
</div>

<div id="scroll" class="usermember_center" style="background-color:#F7F7F7;top: 60px;overflow-x: hidden;">

    <ul id="myTab" class="nav nav-tabs" style="position: fixed;z-index: 1;width: 100%;background-color: whitesmoke;border: none;-moz-box-shadow: 0px 1px 2px #cfe5ff;box-shadow: 0px 1px 2px #cfe5ff;">
        <li class="active" style="width: 20%;background-color: white;white-space : nowrap">
            <div class="liborder">
                <a href="#all" data-toggle="tab" ng-click="vm.changeLabelPage('all')">
                    全部
                </a>
            </div>
        </li>
        <li style="width: 20%;background-color: white;white-space : nowrap">
            <div class="liborder">
                <a href="#wait" data-toggle="tab" ng-click="vm.changeLabelPage('wait')">
                    待接单
                </a>
            </div>
        </li>
        <li style="width: 20%;background-color: white;white-space : nowrap">
            <div class="liborder">
                <a href="#already" data-toggle="tab" ng-click="vm.changeLabelPage('already')">
                    已接单
                </a>
            </div>
        </li>
        <li style="width: 20%;background-color: white;white-space : nowrap">
            <div class="liborder">
                <a href="#waitassess" data-toggle="tab" ng-click="vm.changeLabelPage('waitassess')">
                    待评价
                </a>
            </div>
        </li>
        <li style="width: 20%;background-color: white;white-space : nowrap">
            <div class="liborder">
                <a href="#alreadyassess" data-toggle="tab" ng-click="vm.changeLabelPage('alreadyassess')">
                    已评价
                </a>
            </div>
        </li>
    </ul>

    <div id="myTabContent" class="tab-content" style="padding-top: 15%;">
        <div class="tab-pane fade in active" id="all">
            <div ng-if="vm.all.length === 0">
                <div style="position: fixed;top: 30%;width: 100%;height: auto;text-align: center;justify-content:center;">
                    <img style="display: inline-block" ng-src="images/78.png"></br>
                    <span>您还没有新订单哦！</span>
                </div>
            </div>
            <ul class="list-group repairlist" style="margin-bottom: 0">
                <li class="list-group-item list-group-item-primary" ng-repeat="record in vm.all track by $index" style="padding: 3%;margin-bottom: 2%;">
                    <div style="display:block;width: 95%;height: 20px" ui-sref="repairdetail({jobid:record.jobid,jobstatus:record.jobstatus})">
                        <div style="float: left;">
                            <img src="images/14.png" style="display: inline-block;width: 20px;height: 20px">
                            <div style="display: inline-block;vertical-align: middle;"><span style="font-weight: 600;padding-right: 15px">{{record.title}}</span>{{record.createtime | date: 'yyyy-MM-dd'}}</div>
                        </div>
                        <div style="display: inline-block;float: right;font-weight: 600;" ng-class="{status1:record.jobstatus == 0,status2:record.jobstatus == 1,status3:record.jobstatus == 2 || record.jobstatus == 3,status4:record.jobstatus == 4}">{{record.jobstatus | repairFilter}}</div>
                    </div>
                    <div style="display: block;width: 100%;height: auto;margin: 10px 10px;" ui-sref="repairdetail({jobid:record.jobid,jobstatus:record.jobstatus})">
                        <div ng-repeat="pro in record.commonality.sort" style="display:inline-block;clear: both;width: auto;height: auto;background-color: rgb(235,241,253);padding: 0 10px;margin:10px;border-radius:25px;color: rgb(127,162,251)" ng-click="vm.chose($event,pro)">
                            {{pro}}
                        </div>
                    </div>
                    <div ng-class="{textbottom:record.jobstatus == 1 || record.jobstatus == 2 || record.jobstatus == 3 || record.jobstatus == 4}" ng-show="record.detail" style="position: relative;margin-right: 5%;padding-bottom: 2%">
                        <div style="display: inline-block;word-wrap: break-word;width:70%;margin: 0 5%" ui-sref="repairdetail({jobid:record.jobid,jobstatus:record.jobstatus})">
                            {{record.detail}}
                        </div><!--
                    --><div style="display: inline-block;position: absolute;top: -5px;width: 20%;">
                            <div ng-class="{hasassess:record.jobstatus == 4,noassess:record.jobstatus == 2 || record.jobstatus == 3}" ng-if="record.jobstatus == 4">已评价</div>
                            <div ng-class="{hasassess:record.jobstatus == 4,noassess:record.jobstatus == 2 || record.jobstatus == 3}" ng-if="record.jobstatus == 2 || record.jobstatus == 3" ui-sref="repairevaluate({jobid:record.jobid,repairmanname:record.repairman.name})">评价</div>
                        </div>
                    </div>
                    <div style="display: block;margin: 5px 20px;width: 90%;height: 20px;padding-top: 1%;" ng-if="record.jobstatus == 1 || record.jobstatus == 2 || record.jobstatus == 3 || record.jobstatus == 4">
                        <div style="float: left">
                            <img src="images/15.png" style="width: 20px;height: 20px">
                            <div style="display: inline-block;vertical-align: middle;font-size: 14px"><span style="font-weight: 600;padding-right: 15px">{{record.repairman.name}}</span>{{record.repairman.time | date: 'yyyy-MM-dd'}}</div>
                        </div>
                        <div style="display: inline-block;float: right;font-weight: 600;"><a href="tel:{{record.repairman.phone}}">{{record.repairman.phone}}</a></div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="tab-pane fade" id="wait">
            <div ng-if="vm.wait.length === 0">
                <div style="position: fixed;top: 30%;width: 100%;height: auto;text-align: center;justify-content:center;">
                    <img style="display: inline-block" ng-src="images/78.png"></br>
                    <span>您还没有新订单哦！</span>
                </div>
            </div>
            <ul class="list-group" style="margin-bottom: 0">
                <li class="list-group-item list-group-item-primary" ng-repeat="record in vm.wait track by $index" style="padding: 3%;margin-bottom: 2%;">
                    <div style="display:block;width: 95%;height: 20px" ui-sref="repairdetail({jobid:record.jobid,jobstatus:record.jobstatus})">
                        <div style="float: left;">
                            <img src="images/14.png" style="display: inline-block;width: 20px;height: 20px">
                            <div style="display: inline-block;vertical-align: middle;"><span style="font-weight: 600;padding-right: 15px">{{record.title}}</span>{{record.createtime | date: 'yyyy-MM-dd'}}</div>
                        </div>
                        <div style="display: inline-block;float: right;font-weight: 600;" ng-class="{status1:record.jobstatus == 0,status2:record.jobstatus == 1,status3:record.jobstatus == 2 || record.jobstatus == 3,status4:record.jobstatus == 4}">{{record.jobstatus | repairFilter}}</div>
                    </div>
                    <div style="display: block;width: 100%;height: auto;margin: 10px 10px;" ui-sref="repairdetail({jobid:record.jobid,jobstatus:record.jobstatus})">
                        <div ng-repeat="pro in record.commonality.sort" style="display:inline-block;clear: both;width: auto;height: auto;background-color: rgb(235,241,253);padding: 0 10px;margin:10px;border-radius:25px;color: rgb(127,162,251)" ng-click="vm.chose($event,pro)">
                            {{pro}}
                        </div>
                    </div>
                    <div ng-class="{textbottom:record.jobstatus == 1 || record.jobstatus == 2 || record.jobstatus == 3 || record.jobstatus == 4}" ng-show="record.detail" style="position: relative;margin-right: 5%;padding-bottom: 2%">
                        <div style="display: inline-block;word-wrap: break-word;width:70%;margin: 0 5%" ui-sref="repairdetail({jobid:record.jobid,jobstatus:record.jobstatus})">
                            {{record.detail}}
                        </div><!--
                    --><div style="display: inline-block;position: absolute;top: -5px;width: 20%;">
                        <div ng-class="{hasassess:record.jobstatus == 4,noassess:record.jobstatus == 2 || record.jobstatus == 3}" ng-if="record.jobstatus == 4">已评价</div>
                        <div ng-class="{hasassess:record.jobstatus == 4,noassess:record.jobstatus == 2 || record.jobstatus == 3}" ng-if="record.jobstatus == 2 || record.jobstatus == 3" ui-sref="repairevaluate({jobid:record.jobid,repairmanname:record.repairman.name})">评价</div>
                    </div>
                    </div>
                    <div style="display: block;margin: 5px 20px;width: 90%;height: 20px;padding-top: 1%;" ng-if="record.jobstatus == 1 || record.jobstatus == 2 || record.jobstatus == 3 || record.jobstatus == 4">
                        <div style="float: left">
                            <img src="images/15.png" style="width: 20px;height: 20px">
                            <div style="display: inline-block;vertical-align: middle;font-size: 14px"><span style="font-weight: 600;padding-right: 15px">{{record.repairman.name}}</span>{{record.repairman.time | date: 'yyyy-MM-dd'}}</div>
                        </div>
                        <div style="display: inline-block;float: right;font-weight: 600;"><a href="tel:{{record.repairman.phone}}">{{record.repairman.phone}}</a></div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="tab-pane fade" id="already">
            <div ng-if="vm.already.length === 0">
                <div style="position: fixed;top: 30%;width: 100%;height: auto;text-align: center;justify-content:center;">
                    <img style="display: inline-block" ng-src="images/78.png"></br>
                    <span>您还没有新订单哦！</span>
                </div>
            </div>
            <ul class="list-group" style="margin-bottom: 0">
                <li class="list-group-item list-group-item-primary" ng-repeat="record in vm.already track by $index" style="padding: 3%;margin-bottom: 2%;">
                    <div style="display:block;width: 95%;height: 20px" ui-sref="repairdetail({jobid:record.jobid,jobstatus:record.jobstatus})">
                        <div style="float: left;">
                            <img src="images/14.png" style="display: inline-block;width: 20px;height: 20px">
                            <div style="display: inline-block;vertical-align: middle;"><span style="font-weight: 600;padding-right: 15px">{{record.title}}</span>{{record.createtime | date: 'yyyy-MM-dd'}}</div>
                        </div>
                        <div style="display: inline-block;float: right;font-weight: 600;" ng-class="{status1:record.jobstatus == 0,status2:record.jobstatus == 1,status3:record.jobstatus == 2 || record.jobstatus == 3,status4:record.jobstatus == 4}">{{record.jobstatus | repairFilter}}</div>
                    </div>
                    <div style="display: block;width: 100%;height: auto;margin: 10px 10px;" ui-sref="repairdetail({jobid:record.jobid,jobstatus:record.jobstatus})">
                        <div ng-repeat="pro in record.commonality.sort" style="display:inline-block;clear: both;width: auto;height: auto;background-color: rgb(235,241,253);padding: 0 10px;margin:10px;border-radius:25px;color: rgb(127,162,251)" ng-click="vm.chose($event,pro)">
                            {{pro}}
                        </div>
                    </div>
                    <div ng-class="{textbottom:record.jobstatus == 1 || record.jobstatus == 2 || record.jobstatus == 3 || record.jobstatus == 4}" ng-show="record.detail" style="position: relative;margin-right: 5%;padding-bottom: 2%">
                        <div style="display: inline-block;word-wrap: break-word;width:70%;margin: 0 5%" ui-sref="repairdetail({jobid:record.jobid,jobstatus:record.jobstatus})">
                            {{record.detail}}
                        </div><!--
                    --><div style="display: inline-block;position: absolute;top: -5px;width: 20%;">
                        <div ng-class="{hasassess:record.jobstatus == 4,noassess:record.jobstatus == 2 || record.jobstatus == 3}" ng-if="record.jobstatus == 4">已评价</div>
                        <div ng-class="{hasassess:record.jobstatus == 4,noassess:record.jobstatus == 2 || record.jobstatus == 3}" ng-if="record.jobstatus == 2 || record.jobstatus == 3" ui-sref="repairevaluate({jobid:record.jobid,repairmanname:record.repairman.name})">评价</div>
                    </div>
                    </div>
                    <div style="display: block;margin: 5px 20px;width: 90%;height: 20px;padding-top: 1%;" ng-if="record.jobstatus == 1 || record.jobstatus == 2 || record.jobstatus == 3 || record.jobstatus == 4">
                        <div style="float: left">
                            <img src="images/15.png" style="width: 20px;height: 20px">
                            <div style="display: inline-block;vertical-align: middle;font-size: 14px"><span style="font-weight: 600;padding-right: 15px">{{record.repairman.name}}</span>{{record.repairman.time | date: 'yyyy-MM-dd'}}</div>
                        </div>
                        <div style="display: inline-block;float: right;font-weight: 600;"><a href="tel:{{record.repairman.phone}}">{{record.repairman.phone}}</a></div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="tab-pane fade" id="waitassess">
            <div ng-if="vm.waitassess.length === 0">
                <div style="position: fixed;top: 30%;width: 100%;height: auto;text-align: center;justify-content:center;">
                    <img style="display: inline-block" ng-src="images/78.png"></br>
                    <span>您还没有新订单哦！</span>
                </div>
            </div>
            <ul class="list-group" style="margin-bottom: 0">
                <li class="list-group-item list-group-item-primary" ng-repeat="record in vm.waitassess track by $index" style="padding: 3%;margin-bottom: 2%;">
                    <div style="display:block;width: 95%;height: 20px" ui-sref="repairdetail({jobid:record.jobid,jobstatus:record.jobstatus})">
                        <div style="float: left;">
                            <img src="images/14.png" style="display: inline-block;width: 20px;height: 20px">
                            <div style="display: inline-block;vertical-align: middle;"><span style="font-weight: 600;padding-right: 15px">{{record.title}}</span>{{record.createtime | date: 'yyyy-MM-dd'}}</div>
                        </div>
                        <div style="display: inline-block;float: right;font-weight: 600;" ng-class="{status1:record.jobstatus == 0,status2:record.jobstatus == 1,status3:record.jobstatus == 2 || record.jobstatus == 3,status4:record.jobstatus == 4}">{{record.jobstatus | repairFilter}}</div>
                    </div>
                    <div style="display: block;width: 100%;height: auto;margin: 10px 10px;" ui-sref="repairdetail({jobid:record.jobid,jobstatus:record.jobstatus})">
                        <div ng-repeat="pro in record.commonality.sort" style="display:inline-block;clear: both;width: auto;height: auto;background-color: rgb(235,241,253);padding: 0 10px;margin:10px;border-radius:25px;color: rgb(127,162,251)" ng-click="vm.chose($event,pro)">
                            {{pro}}
                        </div>
                    </div>
                    <div ng-class="{textbottom:record.jobstatus == 1 || record.jobstatus == 2 || record.jobstatus == 3 || record.jobstatus == 4}" ng-show="record.detail" style="position: relative;margin-right: 5%;padding-bottom: 2%">
                        <div style="display: inline-block;word-wrap: break-word;width:70%;margin: 0 5%" ui-sref="repairdetail({jobid:record.jobid,jobstatus:record.jobstatus})">
                            {{record.detail}}
                        </div><!--
                    --><div style="display: inline-block;position: absolute;top: -5px;width: 20%;">
                        <div ng-class="{hasassess:record.jobstatus == 4,noassess:record.jobstatus == 2 || record.jobstatus == 3}" ng-if="record.jobstatus == 4">已评价</div>
                        <div ng-class="{hasassess:record.jobstatus == 4,noassess:record.jobstatus == 2 || record.jobstatus == 3}" ng-if="record.jobstatus == 2 || record.jobstatus == 3" ui-sref="repairevaluate({jobid:record.jobid,repairmanname:record.repairman.name})">评价</div>
                    </div>
                    </div>
                    <div style="display: block;margin: 5px 20px;width: 90%;height: 20px;padding-top: 1%;" ng-if="record.jobstatus == 1 || record.jobstatus == 2 || record.jobstatus == 3 || record.jobstatus == 4">
                        <div style="float: left">
                            <img src="images/15.png" style="width: 20px;height: 20px">
                            <div style="display: inline-block;vertical-align: middle;font-size: 14px"><span style="font-weight: 600;padding-right: 15px">{{record.repairman.name}}</span>{{record.repairman.time | date: 'yyyy-MM-dd'}}</div>
                        </div>
                        <div style="display: inline-block;float: right;font-weight: 600;"><a href="tel:{{record.repairman.phone}}">{{record.repairman.phone}}</a></div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="tab-pane fade" id="alreadyassess">
            <div ng-if="vm.alreadyassess.length === 0">
                <div style="position: fixed;top: 30%;width: 100%;height: auto;text-align: center;justify-content:center;">
                    <img style="display: inline-block" ng-src="images/78.png"></br>
                    <span>您还没有新订单哦！</span>
                </div>
            </div>
            <ul class="list-group" style="margin-bottom: 0">
                <li class="list-group-item list-group-item-primary" ng-repeat="record in vm.alreadyassess track by $index" style="padding: 3%;margin-bottom: 2%;">
                    <div style="display:block;width: 95%;height: 20px" ui-sref="repairdetail({jobid:record.jobid,jobstatus:record.jobstatus})">
                        <div style="float: left;">
                            <img src="images/14.png" style="display: inline-block;width: 20px;height: 20px">
                            <div style="display: inline-block;vertical-align: middle;"><span style="font-weight: 600;padding-right: 15px">{{record.title}}</span>{{record.createtime | date: 'yyyy-MM-dd'}}</div>
                        </div>
                        <div style="display: inline-block;float: right;font-weight: 600;" ng-class="{status1:record.jobstatus == 0,status2:record.jobstatus == 1,status3:record.jobstatus == 2 || record.jobstatus == 3,status4:record.jobstatus == 4}">{{record.jobstatus | repairFilter}}</div>
                    </div>
                    <div style="display: block;width: 100%;height: auto;margin: 10px 10px;" ui-sref="repairdetail({jobid:record.jobid,jobstatus:record.jobstatus})">
                        <div ng-repeat="pro in record.commonality.sort" style="display:inline-block;clear: both;width: auto;height: auto;background-color: rgb(235,241,253);padding: 0 10px;margin:10px;border-radius:25px;color: rgb(127,162,251)" ng-click="vm.chose($event,pro)">
                            {{pro}}
                        </div>
                    </div>
                    <div ng-class="{textbottom:record.jobstatus == 1 || record.jobstatus == 2 || record.jobstatus == 3 || record.jobstatus == 4}" ng-show="record.detail" style="position: relative;margin-right: 5%;padding-bottom: 2%">
                        <div style="display: inline-block;word-wrap: break-word;width:70%;margin: 0 5%" ui-sref="repairdetail({jobid:record.jobid,jobstatus:record.jobstatus})">
                            {{record.detail}}
                        </div><!--
                    --><div style="display: inline-block;position: absolute;top: -5px;width: 20%;">
                        <div ng-class="{hasassess:record.jobstatus == 4,noassess:record.jobstatus == 2 || record.jobstatus == 3}" ng-if="record.jobstatus == 4">已评价</div>
                        <div ng-class="{hasassess:record.jobstatus == 4,noassess:record.jobstatus == 2 || record.jobstatus == 3}" ng-if="record.jobstatus == 2 || record.jobstatus == 3" ui-sref="repairevaluate({jobid:record.jobid,repairmanname:record.repairman.name})">评价</div>
                    </div>
                    </div>
                    <div style="display: block;margin: 5px 20px;width: 90%;height: 20px;padding-top: 1%;" ng-if="record.jobstatus == 1 || record.jobstatus == 2 || record.jobstatus == 3 || record.jobstatus == 4">
                        <div style="float: left">
                            <img src="images/15.png" style="width: 20px;height: 20px">
                            <div style="display: inline-block;vertical-align: middle;font-size: 14px"><span style="font-weight: 600;padding-right: 15px">{{record.repairman.name}}</span>{{record.repairman.time | date: 'yyyy-MM-dd'}}</div>
                        </div>
                        <div style="display: inline-block;float: right;font-weight: 600;"><a href="tel:{{record.repairman.phone}}">{{record.repairman.phone}}</a></div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!--加载转圈动画-->
    <div id="LoadAnimation" style="text-align: center;height: auto;">
        <div class="loader loader--style3" title="2">
            <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="20px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
                <path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
                <animateTransform attributeType="xml"
                    attributeName="transform"
                    type="rotate"
                    from="0 25 25"
                    to="360 25 25"
                    dur="0.6s"
                    repeatCount="indefinite"/>
                </path>
            </svg>
        </div>
    </div>

</div>
<message-Component message-visible="vm.messageVisible" message="vm.message"  surebtn="vm.sureBtn()"
                   cancelbtn="vm.cancelBtn()"></message-Component>